<!-- <template>
	<div class="hcity">
		<div class="hcity-title" @click="toHome()">
			热门城市
		</div>
		<div class="hcity-list">
			<ul  v-for ="(item,index) in hotCities" :key="index">
				<li>{{item.name}}</li>
			</ul>
		</div>

	</div>
</template>

<script>
	export default {
		props:['hotCities'],
	}
</script>

<style scoped>
	.hcity{
		width: 100%;
		font-size: 0.28rem;
	}
	.hcity-title{
		padding: 0.2rem 0.3rem;
	}
	.hcity-list{
		background-color: white;
		overflow: hidden;  /* 溢出隐藏*/
		position: relative;
	}
	/* 在li标签之前；创建一个虚拟标签，覆盖在ul上方；避免标签之间的内容冲突 */
	.hcity-list:before{
		content: "";
		position: absolute;
		/* 生成一个宽度与li同宽，高度与ul同高的虚拟标签*/
		width: 33.333%;
		height: 100%;
		/* 移动一个li宽度的位置：为了每一行的第二个li */
		left: 33.333%;
		border-left: 1px solid #ddd;
		border-right: 1px solid #ddd;
	}
	.hcity-list li{
		width: 33.333%;
		height: 0.9rem;
		text-align: center;
		line-height: 0.9rem;
		float: left;
		border-bottom: 1px solid #ddd;
	}
	
</style>
 -->